// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager, TextInput } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons';

// antd 按需加载
import { Tabs, Toast, Portal, SegmentedControl } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { goodsAppraise } from '../../module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, CacheImage, RnFlatList, CardForm, Layout } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { } from '../../util/images.js';
import { press, size, ScreenWidth, hotTextColor, borderBottom, pathHead, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage } from '../../util/utils.js'

class GoodsAppraise extends Component {

  constructor(props) {
    super(props)
    this.state = {
      content: '',
      score: 5
    }
  }

  componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      // ...耗时较长的同步的任务...
    });
  }

  handleGoodsAppraise() {
    const { goods, order } = this.props
    const { content, score } = this.state
    if (!content) {
      Toast.info('请输入评价内容')
      return
    }
    if (content.length <= 10) {
      Toast.info('请输入至少十个字')
      return
    }
    this.loading = Toast.loading('发布中', 0)
    goodsAppraise({
      id: goods.id,
      score: score,
      content,
      appraiseImageList: [],
    }).then(res => {
      console.log(res)
      Actions.pop()
      Actions.refresh({ refresh: true })

    }).finally(() => {
      Portal.remove(this.loading)
    })
  }

  onChange(e) {
    this.setState({
      score: e
    })
  };

  onValueChange = value => {
    console.log(value);
  };

  render() {
    const { order, goods } = this.props
    const { content, score } = this.state
    return (
      <Layout
        style={{ backgroundColor: '#fff' }}
        header={<Status />}
      >
        <NavBar
          title="发布评论"
          back={true}
        />
        <ScrollView style={Style.content}>
          <View
            style={{
              marginTop: 10,
              flexDirection: 'row',
              padding: 15,
              backgroundColor: '#fff'
            }}
          >
            <View style={{
              width: 80,
            }}>
              <CacheImage
                resizeMod={"contain"}
                style={{
                  width: 80,
                  height: 80,
                }}
                source={{ uri: `${pathHead}${goods.goodsMainPic}` }}

              />
            </View>
            <View style={{
              flexDirection: 'column',
              justifyContent: 'space-between',
              height: 80,
              marginLeft: 10,
              flex: 1
            }}>
              <Text style={{ fontSize: 16, color: '#000', lineHeight: 18, }} numberOfLines={1} ellipsizeMode={'tail'}>{goods.goodsName}</Text>
              <Text style={{ fontSize: 12, color: '#61676F', lineHeight: 16, }} numberOfLines={1} ellipsizeMode={'tail'}>{goods.goodsAttribute}</Text>
              <View style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'center',
              }}>
                <Text style={{ fontSize: 14, color: '#E5C67B', lineHeight: 30, }}>¥{goods.goodsPrice}</Text>
                <Text style={{ fontSize: 12, color: '#61676F', lineHeight: 16, }}>x{goods.goodsNumber}</Text>
              </View>
            </View>
          </View>
          <View style={{ padding: 15, marginTop: 10, backgroundColor: '#fff' }}>
            <TextInput
              onChangeText={(value) => this.setState({ content: value })}
              placeholder="内容"
              value={content}
              multiline
              numberOfLines={10}
              placeholderTextColor="#61676F"
              style={{
                textAlignVertical: 'top',
                lineHeight: 30,
                paddingTop: 10,
                paddingBottom: 10,
                padding: 0,
                paddingRight: 15,
                color: '#333',
                fontSize: 14,
                ...borderBottom()
              }}
              underlineColorAndroid="transparent"
            />
            <View style={{ marginVertical: 30, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', }}>
              {/* <SegmentedControl
                tintColor="#000"
                values={['1星', '2星', '3星', '4星', '5星']}
                selectedIndex={score}
                onChange={this.onChange}
                onValueChange={this.onValueChange}
              /> */}
              <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', }}>
                <TouchableOpacity onPress={() => this.onChange(1)}>
                  <View
                    style={[
                      { width: 50, height: 50, borderRadius: 10, backgroundColor: '#DDD', alignItems: 'center', justifyContent: 'center', },
                      score == 1 ? { backgroundColor: hotTextColor } : {}
                    ]}
                  >
                    <Text style={{ fontSize: 14, color: '#000', lineHeight: 16, }}>1星</Text>
                  </View>
                </TouchableOpacity>
              </View>
              <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', }}>
                <TouchableOpacity onPress={() => this.onChange(2)}>
                  <View
                    style={[
                      { width: 50, height: 50, borderRadius: 10, backgroundColor: '#DDD', alignItems: 'center', justifyContent: 'center', },
                      score == 2 ? { backgroundColor: hotTextColor } : {}
                    ]}
                  >
                    <Text style={{ fontSize: 14, color: '#000', lineHeight: 16, }}>2星</Text>
                  </View>
                </TouchableOpacity>
              </View>
              <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', }}>
                <TouchableOpacity onPress={() => this.onChange(3)}>
                  <View
                    style={[
                      { width: 50, height: 50, borderRadius: 10, backgroundColor: '#DDD', alignItems: 'center', justifyContent: 'center', },
                      score == 3 ? { backgroundColor: hotTextColor } : {}
                    ]}
                  >
                    <Text style={{ fontSize: 14, color: '#000', lineHeight: 16, }}>3星</Text>
                  </View>
                </TouchableOpacity>
              </View>
              <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', }}>
                <TouchableOpacity onPress={() => this.onChange(4)}>
                  <View
                    style={[
                      { width: 50, height: 50, borderRadius: 10, backgroundColor: '#DDD', alignItems: 'center', justifyContent: 'center', },
                      score == 4 ? { backgroundColor: hotTextColor } : {}
                    ]}
                  >
                    <Text style={{ fontSize: 14, color: '#000', lineHeight: 16, }}>4星</Text>
                  </View>
                </TouchableOpacity>
              </View>
              <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', }}>
                <TouchableOpacity onPress={() => this.onChange(5)}>
                  <View
                    style={[
                      { width: 50, height: 50, borderRadius: 10, backgroundColor: '#DDD', alignItems: 'center', justifyContent: 'center', },
                      score == 5 ? { backgroundColor: hotTextColor } : {}
                    ]}
                  >
                    <Text style={{ fontSize: 14, color: '#000', lineHeight: 16, }}>5星</Text>
                  </View>
                </TouchableOpacity>
              </View>
            </View>
            <View style={{ backgroundColor: '#fff' }}>
              <TouchableOpacity
                onPress={() => {
                  this.handleGoodsAppraise()
                }}
                style={{
                  paddingVertical: 14,
                  paddingHorizontal: 20,
                  backgroundColor: hotTextColor,
                  borderRadius: 6,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <Text style={{ fontSize: size(28), color: '#fff', lineHeight: size(30), }}>发布评论</Text>
              </TouchableOpacity>
            </View>
          </View>
        </ScrollView>
      </Layout>
    );
  }
}


export default connect(({ user }) => ({
  user,
}))(pureRender(GoodsAppraise))
